<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "营销传播"
      },
      // 暂时需要登录，后续再改
      "needLogin": true
    }
    </route>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import optimal1 from '../static-assets/optimal/optimal_1.png'
import optimal2 from '../static-assets/optimal/optimal_2.png'
import optimal3 from '../static-assets/optimal/optimal_3.png'
import optimal4 from '../static-assets/optimal/optimal_4.png'
import optimal5 from '../static-assets/optimal/optimal_5.png'

// 服务项目
const services = ref([
  {
    id: 1,
    title: '品牌策划',
    description: '全案策划 / 品牌故事 / 品牌宣传语',
    optimalImg: optimal1,
  },
  {
    id: 2,
    title: '商业策划',
    description: '商业计划书 / 可行性研究报告 / 标书编制',
    optimalImg: optimal2,
  },
  {
    id: 3,
    title: '整合营销',
    description: '整合营销全案 / 百科营销 / 搜索引擎优化 / 思域营销',
    optimalImg: optimal3,
  },
  {
    id: 4,
    title: '代运营',
    description: '电商代运营 / 新媒体代运营 / 小红书代运营',
    optimalImg: optimal4,
  },
  {
    id: 5,
    title: '商务支持',
    description: '提供资质认证、申请、备案、翻译等支持服务',
    optimalImg: optimal5,
  },
])
const model = reactive<{
  phone: string
}>({
  phone: '',
})

const form = ref()

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        uni.showToast({
          title: '校验通过',
          icon: 'success',
        })
        // toast.success('校验通过')
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>

<template>
  <view class="bg-#f5f5f5 pb-30rpx">
    <!-- 顶部banner -->
    <view class="h-350rpx overflow-hidden p-20rpx">
      <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="widthFix" :lazy-load="true" />
    </view>

    <!-- 解决方案 -->
    <view class="m-20rpx rounded-12rpx bg-white p-30rpx">
      <view class="mb-20rpx text-left text-32rpx font-bold">
        企业品牌创新营销
      </view>
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <view style="border-bottom: 1px solid #e5e5e5;">
            <wd-input
              v-model="model.phone"
              label="手机号"
              label-width="31%"
              prop="phone"
              :maxlength="11"
              clearable
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请输入手机号' }]"
            >
              <template #prefix>
                <image
                  src="/static/phone.svg"
                  mode="scaleToFill"
                  class="h-40rpx w-40rpx"
                />
              </template>
            </wd-input>
          </view>
        </wd-cell-group>
        <view class="mt-40rpx">
          <wd-button type="primary" size="large" custom-class="red_button" block @click="handleSubmit">
            立即咨询
          </wd-button>
        </view>
      </wd-form>
    </view>

    <!-- 企业用工痛点 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view>
        <view>
          <view class="text-32rpx text-black font-bold">
            优选服务
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-2 gap-15rpx">
            <view
              v-for="service in services"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
            >
              <image
                :src="service.optimalImg"
                mode="scaleToFill"
                class="absolute inset-0 h-full w-full" :lazy-load="true"
              />
              <view class="relative z-10 mt-10rpx">
                <view class="mb-20rpx truncate text-28rpx font-bold">
                  {{ service.title }}
                </view>
                <view class="line-clamp-3 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="m-20rpx rounded-12rpx bg-white p-20rpx">
      <view class="mb-30rpx flex items-center pl-10rpx text-32rpx font-bold">
        合作机构
      </view>
      <scroll-view scroll-x class="whitespace-nowrap px-4" style="width: auto;">
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
      </scroll-view>
    </view>
  </view>
</template>
